import React from 'react';
import { List, SearchBar, WhiteSpace, WingBlank, ListView } from 'antd-mobile';
import { connect } from 'dva';
import moment from 'moment';
import _ from 'lodash';
import Container from '../components/Base/Container';
import ReactEcharts from '../components/Base/Echarts';
import MyIcon from '../components/Base/MyIcon';
import styles from './MyBonusVips.css';
import { routerRedux } from "dva/router";

const ListItem = List.Item;


class Bonus extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
    };
  }

  goVipInfo = (cardNo) => {
    this.props.dispatch(routerRedux.push({
      pathname: '/vipInfo',
      query: { cardNo },
    }));
  }

  renderRow = (rowData, a, index) => {
    return (<ListItem
      onClick={() => {
      }}
    >
      <div className={styles.header} onClick={() => this.goVipInfo(rowData.card_no)}>
        <span className={styles.header_item}>{rowData.vip_name}</span>
        <span className={styles.header_span1}>{rowData.card_no}</span>
        <span className={styles.header_span1}>{rowData.oper_date ? moment(rowData.oper_date).format('YYYY-MM-DD') : ''}</span>
      </div>
    </ListItem>);
  };

  componentDidMount() {
    const month = this.props.location.query.month;
    this.props.dispatch({
      type: 'bonus/fetchVipList',
      payload: { month },
    });
  }

  onSearch = (keywords) => {
    const month = this.props.location.query.month;
    this.props.dispatch({
      type: 'bonus/fetchVipList',
      payload: { month, keywords },
    });
  }

  onCancel = () => {
    const month = this.props.location.query.month;
    this.props.dispatch({
      type: 'bonus/fetchVipList',
      payload: { month },
    });
  }

  render() {
    const { vipList } = this.props;
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    return (
      <Container title="拓客消费会员">
        <div>
          <div>
            <div className={styles.search}>
              <WingBlank size="sm">
                <SearchBar
                  placeholder="输入手机号或卡号或姓名"
                  onSubmit={this.onSearch}
                  onCancel={this.onCancel}
                />
              </WingBlank>
            </div>

            <div className={styles.totalDesc}>
              <span>
                <MyIcon
                  type="trips" color="#ff2828" size="xxs"
                  style={{ position: 'relative', top: 2, marginRight: 8 }}
                />总计： <span style={{ color: 'red' }}>{vipList.length} 人</span> {this.state.label}</span>
            </div>

            <ListView
              dataSource={dataSource.cloneWithRows(vipList || [])}
              renderHeader={() => (
                <div>
                  <div className={styles.header}>
                    <span className={styles.header_item}>会员</span>
                    <span className={styles.header_span1} >卡号</span>
                    <span className={styles.header_span1} >注册时间</span>
                  </div>
                </div>
              )}
              renderRow={this.renderRow}
              pageSize={20}
              initialListSize={20}
                  // scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
                  // onEndReached={this.onEndReached}
                  // onEndReachedThreshold={10}
              useBodyScroll
            />
          </div>
          <WhiteSpace size="lg" />
        </div>
      </Container>
    );
  }
}


export default connect((state) => {
  return {
    vipList: state.bonus.vipList,
    user: state.auth.currentUser,
  };
},
  (dispatch) => {
    return {
      dispatch,
    };
  },
)(Bonus);
